<template>
  <div class="index_container">
    <div class="staff_title">员工工作</div>
    <div class="staff_top">
      <el-form :inline="true" :model="staffForm">
        <el-form-item prop="time">
          <el-date-picker
            v-model="staffForm.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="姓名" prop="username">
          <el-input
            class="input-100"
            v-model="staffForm.username"
            placeholder="请输入姓名"
            @input="handleSearch"
          ></el-input>
        </el-form-item>
        <el-form-item label="款号" prop="style_number">
          <el-input
            class="input-100"
            v-model="staffForm.style_number"
            placeholder="请输入款号"
            @input="handleSearch"
          ></el-input>
        </el-form-item>
        <el-form-item label="扎号" prop="batch_number">
          <el-input
            class="input-100"
            v-model="staffForm.batch_number"
            placeholder="请输入扎号"
            @input="handleSearch"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="searchWork">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-popconfirm
        title="确定要通过选中数据吗？"
        confirm-button-text="确认"
        cancel-button-text="取消"
        @confirm="changeConfirm"
        @cancel="changeCancel"
      >
        <el-button slot="reference" class="staff_btn">批量通过</el-button>
      </el-popconfirm>
    </div>
    <div>
      <myTabel
        stripe
        v-if="showMyTable"
        :columnData="columnData"
        :data="tableData"
        @handle-selectionChange="handleSelectionChange"
      >
        <el-table-column label="操作" align="left" width="190px">
          <template slot-scope="scope">
            <el-button type="text" @click="editUser(scope.row, 'edit')">
              修改并通过</el-button
            >
            <el-button
              type="text el-button--del"
              @click="reject(scope.row, 'reject')"
            >
              驳回
            </el-button>
          </template>
        </el-table-column>
      </myTabel>
      <el-dialog :visible="isVisible" :title="title"

                 @close="isVisible=false"
                 width="660px">
        <div class="dialog_content">
          <el-form
            :inline="true"
            label-position="right"
            :model="addStaffForm"
            label-width="80px"
          >
            <el-form-item label="部位" prop="position">
              <el-input v-model="addStaffForm.position"></el-input>
            </el-form-item>
            <el-form-item label="扎号" prop="batch_number">
              <el-input v-model="addStaffForm.batch_number"></el-input>
            </el-form-item>
            <el-form-item label="尺码" prop="size">
              <el-input v-model="addStaffForm.size"></el-input>
            </el-form-item>
            <el-form-item label="款号" prop="style_number">
              <el-input v-model="addStaffForm.style_number"></el-input>
            </el-form-item>
            <el-form-item label="件数" prop="quantity">
              <el-input v-model="addStaffForm.quantity"></el-input>
            </el-form-item>
            <el-form-item label="单价" prop="wage">
              <el-input v-model="addStaffForm.wage"></el-input>
            </el-form-item>
            <el-form-item label="总金额" prop="total_amount">
              <el-input disabled v-model="totalAmount"></el-input>
            </el-form-item>
            <el-form-item label="时间" prop="time">
              <el-input v-model="addStaffForm.time"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="addStaffForm.remark"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancal">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getWork,
  passWord,
  rejectWork,
  allPass,
} from "@/request/api/employeeWorkApi/employeeWorkApi";
import dayjs from "dayjs";
import { statusText } from "@/utils/filter";
import myTabel from "@/components/myTable/index.vue";
export default {
  components: { myTabel },
  computed: {
    totalAmount() {
      return (this.addStaffForm.total_amount =
        this.addStaffForm.quantity * this.addStaffForm.wage);
    },
  },
  data() {
    const _this = this;
    return {
      isVisible: false,
      showMyTable: true,
      staffForm: {
        time: [],
        username: "",
        product_id: "",
        batch_number: "",
      },
      addStaffForm: {
        username: "",
        contact: "",
        price_table: "",
        job_number: "",
        remark: "",
      },
      columnData: [
        {
          type: "selection",
          width: "55",
          fixed: "left",
          hideCheck: true,
          selectable: _this.checkbox,
        },
        {
          prop: "username",
          label: "员工名称",
          "min-width": "80",
        },
        {
          prop: "position",
          label: "部位",
          "min-width": "80",
        },
        {
          prop: "batch_number",
          label: "扎号",
          "min-width": "80",
        },
        {
          prop: "size",
          label: "尺码",
          "min-width": "80",
        },
        {
          prop: "quantity",
          label: "件数",
          "min-width": "80",
        },
        {
          prop: "style_number",
          label: "款号",
          "min-width": "80",
        },
        {
          prop: "total_amount",
          label: "总金额",
          "min-width": "80",
        },
        {
          prop: "time",
          label: "时间",
          "min-width": "180",
        },
        {
          prop: "remark",
          label: "备注",
          "min-width": "80",
        },
        {
          prop: "status",
          label: "状态",
          "min-width": "80",
          render(h, row) {
            return h("div", {}, [
              h(
                "el-tag",
                {
                  class: {
                    "custom-tooltip": true,
                  },
                  props: {
                    type:
                      row.status === "Approved"
                        ? "success"
                        : "" || row.status === "Rejected"
                        ? "danger"
                        : "" || row.status === "Pending"
                        ? ""
                        : "",
                  },
                },

                statusText(row.status)
              ),
            ]);
          },
        },
      ],
      title: "",
      type: "",
      multipleSelection: "",
      tableData: [],
    };
  },
  created() {
    //默认时间为当月
    const start_time = dayjs().startOf("month").format("YYYY-MM-DD");
    //当天
    const end_time = dayjs().format("YYYY-MM-DD");
    this.staffForm.time = [start_time, end_time];



    this.getWorkList();
  },

  methods: {
    handleSearch() {
      if (this.staffForm.username) {
        this.tableData = this.tableData.filter((item) => {
          return item.username.includes(this.staffForm.username);
        });
      } else if (this.staffForm.product_id) {
        this.tableData = this.tableData.filter((item) => {
          return item.product_id.includes(this.staffForm.product_id);
        });
      } else if (this.staffForm.batch_number) {
        this.tableData = this.tableData.filter((item) => {
          return item.batch_number.includes(this.staffForm.batch_number);
        });
      } else {
        this.getWorkList();
      }
    },
    searchWork() {
      const start_time = dayjs(this.staffForm.time[0]).format("YYYY-MM-DD");
      const end_time = dayjs(this.staffForm.time[1]).format("YYYY-MM-DD");
      const data = {
        start_time,
        end_time,
      };
      getWork(data).then((res) => {
        this.tableData = res.data;
      });
    },
    // 获取用户列表
    getWorkList() {
      const start_time = dayjs(this.staffForm.time[0]).format("YYYY-MM-DD");
      const end_time = dayjs(this.staffForm.time[1]).format("YYYY-MM-DD");
      const data = {
        start_time,
        end_time,
      };
      getWork(data).then((res) => {
        this.tableData = res.data;
      });
    },
    // 修改商品
    editUser(val, type) {
      this.addStaffForm = val;
      this.type = type;
      this.title = "修改并通过";
      this.isVisible = true;
    },
    // 删除用户
    reject(val, type) {
      this.type = type;
      this.isVisible = true;
      this.title = "驳回申请";
      this.addStaffForm = val;
    },

    // 添加用户
    submit() {
      const data = {
        ...this.addStaffForm,
      };
      if (this.type === "edit") {
        passWord(data).then((res) => {
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "修改成功",
            });
            this.cancal();
          }
        });
      }
      if (this.type === "reject") {
        const data = {
          id: this.addStaffForm.id,
          remark: this.addStaffForm.remark,
        };
        rejectWork(data).then((res) => {
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "修改成功",
            });
            this.cancal();
          }
        });
      }
    },

    // 关闭弹框
    cancal() {
      this.isVisible = false;
      this.addStaffForm = {
        username: "",
        contact: "",
        price_table: "",
        job_number: "",
        remark: "",
      };
      this.getWorkList();
    },
    // 判断是否可以勾选
    checkbox(row) {
      // dictKey: "TODO", dictValue: "待审核"
      // 状态数组
      let status = ["Pending"];
      // 状态值
      let approveStatus = row.status;
      // 判断状态是否可以勾选
      let value = status.includes(approveStatus);
      return value;
    },
    handleSelectionChange(val) {
      // 已勾选的行赋值
      this.multipleSelection = val.map((item) => {
        return item.id;
      });
    },
    changeConfirm() {
      const data = {
        id: this.multipleSelection.join(','),
      };
      allPass(data).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: res.message,
          });
          this.cancal();
        }
      });
    },
    changeCancel() {},
  },
  mounted() {},
};
</script>

<style lang="scss">
.staff_title {
  font-size: 24px;
  font-weight: 500;
}
.staff_top {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  .input-100 {
    .el-input__inner {
      width: 100px;
    }
  }
  .staff_btn {
    height: 32px;
    line-height: 10px;
  }
}
.dialog_content {
  width: 400px;
  margin: 0 auto;
}
</style>
